<template>
	<view class="content">
		<view class="u-flex-x-center steps_warp">
			<u-steps :current="current" activeColor="#FF7612" inactiveColor="#ECEBF1">
				<u-steps-item :title="item.title" iconSize='64px' @change_current="change_current" :index="index"
					v-for="(item,index) in steps_list" :key="index">
				</u-steps-item>
			</u-steps>
		</view>
		<view class="cell-group_warp">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
				<view class="cell-group u-border-radius" v-if="(current==0||current==1||current==2)&&isShowArr">
					<u-form-item label="" :prop="item.fieldName" v-for="item in information_list"
						v-if="item.is_show!=true">
						<yy-cell-v2 v-model="formData[item.fieldName]" ref="child" @change_list="change_list"
							:config='item' :is_audit='is_audit'>
						</yy-cell-v2>
					</u-form-item>

				</view>
				<view v-else-if="(current==3||current==4)&&isShowArr">
					<u-form-item label="" :prop="item.fieldName" v-for="item in information_list"
						v-if="current==item.id&&(item.fieldName=='frontalView'||item.fieldName=='idPhoto')&&item.fieldName!='agreement'">
						<yy-uploadpictures :config='item' v-model="formData[item.fieldName]"></yy-uploadpictures>
					</u-form-item>
				</view>
			</u--form>
			<view class="tip" v-if="Tooltip!=''">
				<text>{{Tooltip}}</text>
			</view>
			<view class="last_step" @click="last_step" v-if="current>0">
				<text>上一步</text>
			</view>
			<view class="next" @click="submit" v-if="current==4">
				<text>提交</text>
			</view>
			<view class="next" @click="next" v-else>
				<text>下一步</text>
			</view>
			<u-popup :show="modal_show" @close="modal_show=false" mode="center" :round='20' :safeAreaInsetBottom="safeAreaInsetBottom">
				<view class="modal u-flex-column u-flex-between">
					<text class="modal_title">{{title}}</text>
					<view class="moda_content">
						<text>资料{{status==0?'审核中，请耐心等待':'已通过'}}</text>
						<text>请将您的ID:{{id}}告知红娘</text>
					</view>
					<view class="u-flex-x-center u-flex-between">
						<view class="modalbtn modalbtn_left" @click="copy">
							<text>复制ID</text>
						</view>
						<view class="modalbtn modalbtn_right" @click="modal_show=false;return_home()">
							<text>关闭</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		user_info
	} from '@/util/user_info.js'
	import {
		getAddress,
		getMemberInfo,
		basicInfo,
		getBasicInfo,
		getInviteCodeKeyInfo
	} from '@/common/api.js'
	export default {
		data() {
			return {
				safeAreaInsetBottom:false,
				status:0,
				is_audit: '',
				title: '温馨提示',
				id: '',
				modal_show: false,
				isShowArr: true,
				current: 0,
				current_info:[[],[],[],[],[]],
				information_list: user_info.fieldName_list,
				Tooltip: '',
				steps_list: [{
					title: '基础信息'
				}, {
					title: '补充信息'
				}, {
					title: '基本联系'
				}, {
					title: '展示自己'
				}, {
					title: '基础证照'
				}],
				rules: {
					
				},
				// Number(new Date())
				formData: {
					key:0,
					memberId: 0, //会员id
					matchmakerUid: 0, //红娘用户id
					fullName: '', //姓名
					sex: '', //性别 可以 填 男 or 女
					birthday: Number(new Date('1995-12-26')), //出生日期
					nlBirthday: Number(new Date('1995-12-26')), //农历出生日期
					constellation: '', //星座
					height: '', //身高
					weight: '', //体重
					education: '', //学历
					jgAddress: '', //籍贯省市区 - 隔开
					nhAddress: '', //现居省市区 - 隔开
					occupation: '', //职业
					annualSalary: '', //年薪
					housingSituation: '', //住房情况
					houseNum: '', //房产数量
					houseInfo: '', //房产详细
					carPurchase: '', //购车情况
					carNum: '', //车俩数量
					carBrand: '', //车品牌
					familyMembers: '', //家庭成员
					parentOccupation: '', //父母职业
					religion: '', //宗教
					canSmoke: '', //会不会抽烟
					likeDrink: '', //爱喝酒吗
					describeYourself: '', //描述自己
					hobby: '', //爱好
					maritalStatus: '', //婚姻状况
					canAcceptMarriageHistory: '', //能否接受对方有婚史
					acceptance: '', //有婚史接受程度
					oneParentFamily: '', //是否单亲家庭
					emotionalAutonomy: '', //父母会参与感情还是完全自主？
					criminalCaseBottom: '', //自己或直系亲属有无刑事案底(不展示)
					fraction: '', //(满分10分)给自己综合打几分(不展示)
					// sheHeightMin:0,//	希望对方身高最小
					sheEducation: '', //希望对方最低学历
					sheInSystemOrBusiness: '', //希望对方体制内还是上班/经商型
					sheWeddingRoom: '', //希望对方婚房情况
					sheVehicle: '', //希望对方车辆情况
					sheKeepPets: '', //是否介意对方养宠物
					sheBrotherOrSister: '', //是否介意对方有兄弟或姐妹
					sheSmoking: '', //是否介意对方抽烟
					sheDrinking: '', //是否介意对方喝酒
					sheReligiousBelief: '', //是否介意对方宗教信仰不同
					sheOneParentFamily: '', //是否介意对方是单亲家庭
					sheType: '', //你及你家人希望Ta是什么类型
					phone: '', //手机号码
					linealSystem: '', //直系联系号码
					wechat: '', //微信号
					frontalView: '[]', //正面照
					idPhoto: '[]',
					sheHeight: "",
					sheAge: '',
					 member_info: '',
				}
			}
		},
		onLoad(option) {
			this.current_info[0]=user_info.fieldName_list
			this.current_info[1]=user_info.fieldName_list1
			this.current_info[2]=user_info.fieldName_list2
			this.current_info[3]=user_info.fieldName_list3
			this.current_info[4]=user_info.fieldName_list4
			if(uni.getStorageSync('numberFormData')){
				this.formData=uni.getStorageSync('numberFormData')
			}
			if (option.id) {
				// this.formData.memberId = option.id
				this.formData.key = option.id
			}
			if (option.userId) {
				this.formData.matchmakerUid = option.userId
			}
			this.Tooltip = this.retrieval_current(this.current)
		},
		watch: {
			formData: {
				handler(value) {
					// console.log('深度监听', value)
					// uni.setStorage('numberFormData',this.formData)
					try{
						uni.setStorageSync('numberFormData', this.formData);
						// uni.getStorageSync('numberFormData',this.formData)
						// alert(JSON.stringify(uni.getStorage('numberFormData')))
					}catch(e){
						//TODO handle the exception
					}
				},
				deep: true // 深度监听
			},
			current(val) {
				this.Tooltip = this.retrieval_current(val)
			}
		},
		computed: {

		},
		async onShow() {
			
			try {
				if (uni.getStorageSync('access_token')) {
					let {
						matchmakerUid,
						memberId,
						key
					} = this.formData
					if (key) {
						
						// let {
						// 	name,
						// 	days
						// } = await this.get_MemberInfo(memberId)
						let {
							name,
							days,
							type,
							integral,
							memberId
						} = await this.getInViteCodeKeyInfo(key)
						this.formData.memberId=memberId
						let day = days == 0 ? '无限期' : days + '天'
						let info_name=name + '(' +day + ')'
						let info_jifen=name+'('+integral+"积分"+')'
						this.$set(this.formData, 'memberInfo',type==0?info_jifen:info_name)
					}
					if(uni.getStorageSync('user_info')){
						let {userId}=uni.getStorageSync('user_info')
						this.id = userId
					}
					let info=await this.get_BasicInfo()
					
					if(info==null){
						this.$wxShare(0)
							return
					}else{
						this.formData=info
						this.status=this.formData.status
						this.modal_show=true
						this.$wxShare(0)
					}
					
				} else {
					uni.navigateTo({
						url: '/pages/guide/index'
					})
				}
				
			} catch (e) {
				//TODO handle the exception
			}


		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			return_home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			copy() {
				let id=JSON.stringify(this.id)
				uni.setClipboardData({
					data:id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					},
					fail:(err)=>{
						console.log(err)
					}
				});
			},
			get_BasicInfo() {
				return new Promise(resolve => {
					getBasicInfo().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
				})
			},
			change_current(index) {
				if(index==this.current||index>this.current){
					return
				}
				this.current = index
				this.view_display()
			},
			view_display() {
				this.isShowArr = false;
				this.$nextTick(() => {
					this.isShowArr = true;
				})
			},
			retrieval_current(current) {
				switch (current) {
					case 0:
						this.information_list = user_info.fieldName_list;
						return "请如实录入个人基本资料，便于给您提供更好的服务，不 真实的录入所造成的后果将按合同所约定执行";
						break;
					case 1:
						this.information_list = user_info.fieldName_list1;
						return "请如实录入个人基本资料，便于给您提供更好的服务，不 真实的录入所造成的后果将按合同所约定执行";
						break;
					case 2:
						this.information_list = user_info.fieldName_list2
						return "联系资料仅供登记审核，平台将加密处理且不会主 动泄露给任何人";
						break;
					case 3:
						this.information_list = user_info.fieldName_list3;
						return "";
						break;
					case 4:
						this.information_list = user_info.fieldName_list4;
						return "";
						break;
				}
			},
			change_list(e) {
				let {
					name,
					obj
				} = e
				
				this.information_list.forEach(item => {
					if (name == '暂时无房' && (item.fieldName == 'houseNum' || item.fieldName ==
							'houseInfo')) {
						item.is_show = true
					} else if ((name == '有房' || name == '有房(城区)') && (item.fieldName == 'houseNum' || item
							.fieldName == 'houseInfo')) {
						item.is_show = false
					} else if (name == '暂无代步车' && (item.fieldName == 'carNum' || item.fieldName ==
							'carBrand')) {
						item.is_show = true
					} else if ((name == '有代步车' || name == '有代步车(BBA及以上)') && (item.fieldName ==
							'carNum' ||
							item.fieldName == 'carBrand')) {
						item.is_show = false
					} else if (obj.title == '能否接受对方有婚史' && name == '不能' && item.fieldName == 'acceptance') {
						item.is_show = true
					} else if (obj.title == '能否接受对方有婚史' && name == '能' && item.fieldName == 'acceptance') {
						item.is_show = false
					}
				})
			},
			getInViteCodeKeyInfo(key) {
				let data = {
					params: {
						key: key
					}
				}
				return new Promise(resolve => {
					getInviteCodeKeyInfo(data,{
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			get_MemberInfo(memberId) {
				let data = {
					params: {
						memberId: memberId
					}
				}
				return new Promise(resolve => {
					getMemberInfo(data,{
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			get_Address() {
				return new Promise(resolve => {
					getAddress({
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						resolve(result);
					}).catch((err) => {

					})
				}).catch((e) => {});

			},
			last_step() {
				this.current--;
				this.view_display()
			},
			rule_validate(key,value,arr){
				let brr=[]
				if(key=='matchmakerMeitu'||key=='houseNum'||key=='houseInfo'||key=='carNum'||key=='birthday'||key=='nlBirthday'||key=='carBrand'||key=='acceptance'||key=='agreement'){
					return brr
				}
				arr.forEach(item => {
					// console.log(item)
					if(item.fieldName==key&&((typeof value === 'number'&&key==0)||value=='[]'||value=='')){
						
						brr.push(item.title)
					}
				})
				return brr
			},
			submit() {
				let regroupArr=[...this.current_info[0],...this.current_info[1],...this.current_info[2],...this.current_info[3],...this.current_info[4]]
				for (const [key, value] of Object.entries(this.formData)) {
				let boolen=this.rule_validate(key,value,regroupArr)
					if(boolen.length>0){
						return uni.$u.toast(boolen[0]+'不为空')
					}
				}
				let isclick=true
				
				if (this.current == 4 && isclick) {
					isclick = false
					uni.showLoading({
						title: '加载中'
					});

					basicInfo(this.formData, {
						custom: {
							auth: true,
							toast: false,
							catch: true
						}
					}).then((r) => {
						isclick = true
						this.modal_show = true
						
						uni.hideLoading();
						uni.removeStorageSync('numberFormData')
					}).catch((err) => {
						console.log(err)
						uni.hideLoading();
					})
				}
			},
			next() {
				let regroupArr=this.current_info[this.current]
				for (const [key, value] of Object.entries(this.formData)) {
				let boolen=this.rule_validate(key,value,regroupArr)
					if(boolen.length>0){
						return uni.$u.toast(boolen[0]+'不为空')
					}
				}
					uni.pageScrollTo({
						scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration:300  // 滚动动画的时长
					})
				if (this.current < 4) {
					this.current++
				}
				this.view_display()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100%;
		height: 100%;

		.cell-group_warp {
			padding: 0 24rpx 95rpx;
			box-sizing: border-box;

			.cell-group {

				.cell {
					background-color: #fff;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					height: 108rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 32rpx 0 33rpx;

					.label {
						color: #111111;
					}

					text {
						font-size: 28rpx;
					}
				}
			}

		}
		/deep/ .u-form-item__body{
			padding:0rpx 0 20rpx !important;
		}	
	
		.tip {
			width: 601rpx;
			text-align: center;
			margin: 0 auto 51rpx;

			text {
				font-size: 24rpx;
				color: #929191;
			}
		}

		.next {
			width: 620rpx;
			height: 92rpx;
			background: #FF7612;
			border-radius: 46rpx;
			color: #fff;
			text-align: center;
			line-height: 92rpx;
			margin: auto;
			box-sizing: border-box;

			text {
				font-size: 28rpx;
			}
		}

		.last_step {
			width: 620rpx;
			height: 92rpx;
			border:2rpx solid #FF7612;
			border-radius: 46rpx;
			color:#FF7612;
			text-align: center;
			line-height: 92rpx;
			margin: auto;
			box-sizing: border-box;
			
			text {
				font-size: 28rpx;
			}
			margin-bottom: 20rpx;
		}

		.slot-icon {
			width: auto;
			height: 40rpx;
			background-color: #fff;
			line-height: 40rpx;
			border-radius: 20rpx;
			text-align: center;
			border: 2rpx solid #ECEBF1;
			font-size: 24px;
			color: #FF7612;
			display: block;
			box-sizing: border-box;
			padding: 0 15rpx;
		}

		.steps_warp {
			box-sizing: border-box;
			background-color: #F4F5F7;
			align-items: center;
			padding: 36rpx 24rpx;

			text {
				font-size: 28rpx;
				color: #929191;
			}
		}

		.modal {
			width: 650rpx;
			height: 392rpx;
			padding: 56rpx 36rpx 38rpx;
			box-sizing: border-box;
			text-align: center;

			.modal_title {
				color: #111111;
				font-size: 34rpx;
				font-weight: bold;
			}

			.moda_content {
				width: 380rpx;
				margin: auto;
				text-align: center;
				line-height: 48rpx;

				text {
					display: block;
					font-size: 30rpx;
					color: #111111
				}
			}

			.modalbtn {
				width: 277rpx;
				line-height: 92rpx;
				text-align: center;
				border-radius: 45rpx;

				&.modalbtn_left {
					background-color: #F6F6F6;

					text {
						font-size: 30rpx;
						color: #111111;
					}
				}

				&.modalbtn_right {
					background-color: #FF7612;

					text {
						font-size: 30rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>
